<!--
 * @Author: wuyang
 * @Description: 
 * @Date: 2023-01-05 14:32:27
 * @LastEditors: wuyang
 * @LastEditTime: 2023-01-07 14:37:26
 * @FilePath: \vue3-graduate\src\views\login\components\phone.vue
-->
<template>
  <div>
    <!-- 登录表单 -->
    <el-form
      :model="loginForm"
      :rules="registerRules"
      status-icon
      ref="ruleFormRef"
    >

      <Motion :delay="100">
        <!-- 手机号 -->
        <el-form-item prop="phone" >
          <el-input
            v-model="loginForm.phone"
            placeholder="手机号"
            clearable
          >
            <template #prefix>
              <svg-icon icon-class="login-phone" class="login-iconSize" />
            </template>
          </el-input>
        </el-form-item>
      </Motion>

      <Motion :delay="150">
        <!-- 验证码 -->
        <el-form-item prop="captcha" class="phoneCode">
          <el-input
            v-model="loginForm.captcha"
            placeholder="验证码"
            clearable
          >
            <template #prefix>
              <svg-icon icon-class="login-captcha" class="login-iconSize" />
            </template>
          </el-input>
          <el-button type="primary" plain size="large" class="btn-green">获取验证码</el-button>
        </el-form-item>
      </Motion>

      <Motion :delay="200">
        <!-- 确定按钮 -->
        <el-form-item >
          <el-button type="primary" class="w-full"> 登录 </el-button>
        </el-form-item>
      </Motion>

      <Motion :delay="250">
        <!-- 返回按钮 -->
        <el-form-item >
          <el-button
            class="w-full"
            @click="useUserStoreHook().SET_CURRENTPAGE(0)"
          >
            返回
          </el-button>
        </el-form-item>
      </Motion>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { reactive } from "vue";
// 注册验证规则
import { registerRules } from "../utils/rules";
// 路由
import { useRouter } from "vue-router";
// hook
import { useUserStoreHook } from "@/store/modules/user";
// 过渡动画
import Motion from "../utils/motion";
// 获取路由
const router = useRouter();

// 表单数据
const loginForm = reactive({
  phone: "",
  captcha: "",
});

// 跳转登录页面
const navLogin = () => {
  router.push("/login");
};
</script>
